<template>
	<view class="merchant">
		<view class="header_box w100">
			<image class="w100 h100" src="https://sz.vvv5g.com/assets/img/wxImg/shangjiaruzhu.png" mode=""></image>
		</view>
		<view class="pos">
			<view class="title txtali">
				平台优质商家入驻
			</view>
			<view class="tab_box">
				<view v-if="istuijian==1" class="list_box flex" style="align-items: center;">
					<view class="list_txt s28 family f500">
						推荐人
					</view>
					<input class="uni_input" style="color:#844902;font-size: 28rpx;flex: 1;" v-model="shopName"
						placeholder-class="s28 family f500" placeholder="输入店铺全称" />
				</view>
				<view class="list_box flex">
					<view class="list_txt s28 family f500">
						所在地
					</view>
					<input class="uni_input" @click="btnClick" disabled
						v-model="addressData.formatted_address == '' ? '选择地址' : addressData.formatted_address"
						placeholder-class="s28 family f500" placeholder="输入店铺全称" />
				</view>
				<view class="list_box flex">
					<view class="list_txt s28 family f500">
						店铺名称
					</view>
					<input class="uni_input" style="width: 420rpx;" v-model="dianpu_val"
						placeholder-class="s28 family f500" placeholder="输入店铺全称" />
				</view>
				<view class="list_box flex">
					<view class="list_txt s28 family f500">
						店铺类型
					</view>
					<view :class="[listIndex == index ? 'active_box_active' : 'active_box','family','f400','s22']"
						v-for="(item,index) in list" :key="index" @click="onActive(index)">
						{{item.text}}
					</view>
				</view>
				<view class="list_box flex" v-if="listIndex == 0">
					<view class="list_txt s28 family f500">
						行业分类
					</view>
					<input class="uni_input" disabled="false" placeholder-class="s28 family f500" placeholder="请选择分类"
						@click="open" v-if="arrayList.length == 0" />
					<view style="margin-top: -4upx;" v-else @click="open">
						<scroll-view class="scroll-view_H flex" scroll-x="true"
							style="width: 450upx; white-space: nowrap;">
							<view class="uni_input s26" style="margin-top: 2rpx;display: inline-block;"
								v-for="(item,index) in arrayList" :key="index">
								{{item.name}}
							</view>
						</scroll-view>
					</view>
				</view>
				<view class="list_box flex">
					<view class="list_txt s28 family f500">
						所售商品
					</view>
					<input style="flex: 1;" class="uni_input" v-model="chanp_val" placeholder-class="s28 family f500"
						placeholder="列举1-4个主营产品，逗号分隔" />
				</view>
				<view class="list_box flex">
					<view class="list_txt s28 family f500">
						具体地址
					</view>
					<input style="flex: 1;" class="uni_input" v-model="dizhi_val" placeholder-class="s28 family f500"
						placeholder="输入具体地址" />
				</view>
				<view class="list_box flex">
					<view class="list_txt s28 family f500">
						联系人
					</view>
					<input class="uni_input" v-model="lanxiren_val" placeholder-class="s28 family f500"
						placeholder="输入联系人" />
				</view>
				<view class="list_box flex" style="margin-bottom: 0;">
					<view class="list_txt s28 family f500">
						联系电话
					</view>
					<input class="uni_input" type="number" v-model="phoneNum" maxlength="11"
						placeholder-class="s28 family f500" placeholder="输入联系人电话" />
				</view>
				<view class="bottom_btn s32 fblod familytow txtali" @click="submitData">
					申请入驻
				</view>
			</view>
			<view class="tishi f500 s22 family">
				注：提交成功后两个工作日内答复。
			</view>
		</view>
		<wanl-address ref='wanlAddress' @selectAddress="successSelectAddress"></wanl-address>
		<uni-popup ref="popup" type="bottom" background-color="#fff">
			<view class="bottom_box w100">
				<view class="top_box_bot w100">
					<!-- <scroll-view class="scroll-view_H flex" scroll-x="true">
						<view id="demo1" class="scroll-view-item_H uni-bg-red" v-for="(item,index) in arrayList"
							:key="index">{{item.name}},</view>
					</scroll-view> -->
				</view>
				<view class="bottom_list_box w750">
					<scroll-view scroll-y="true" class="scroll-Y">
						<view :class="[item.flag ? 'content_box_active' : 'content_box','w100','flex']"
							v-for="(item,index) in navsList" :key="index" @click="active(index)">
							<label class="radio flex">
								<radio value="r1" style="transform: scale(.8);" color="#EBBE87" :checked="item.flag" />
								<view id="demo1" class="scroll-view-item_c family f400 s30">{{item.name}}</view>
							</label>
						</view>
					</scroll-view>
				</view>
				<view class="bottom_btn familytow s32 fblod txtali" @click="close">
					确定
				</view>
			</view>
		</uni-popup>
		<!-- 申请成功弹窗 -->
		<uni-popup ref="popupSucce" :mkclick="false" type="center" backgroundColor="transparent">
			<view class="k_box">
				<view class="titl" style="padding-left: 15rpx;padding-right: 15rpx;">您的申请已提交，请保持电话畅通。工作人员将在2个工作日内与您联系！
				</view>
				<view class="btn_box" :style="istuijian==1?'display: flex; align-items: center;justify-content: center;':''">
					<!-- <view class="btn_l" @click="tuichu">退出(3s)</view> -->
					<template v-if="istuijian==0">
						<view class="btn_l btn_r" style="color: #EBBE87;" @click="iKnow">我知道了</view>
					</template>
					<template v-if="istuijian==1">
						<navigator style="display: inline;" open-type="exit" target="miniProgram"><view class="btn_l btn_r" style="color: #EBBE87;">我知道了</view></navigator>
					</template>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import wanlAddress from '@/components/wanl-address.vue'
	export default {
		components: {
			wanlAddress
		},
		data() {
			return {
				issubmit:false,
				istuijian: 0, //0自己入住 1 别人推荐
				navsList: [],
				navListId: 105,
				chanp_val: '',
				dizhi_val: '',
				lanxiren_val: '',
				phoneNum: '',
				dianpu_val: '',
				addressData: {
					name: '',
					mobile: '',
					default: 0,
					//地区
					country: '', // 国家
					province: '', //省份
					city: '', // 城市
					citycode: '', // 城市代码
					district: '', // 县
					adcode: '', // 地区代码
					formatted_address: '', //详细地区
					//详情
					address: '', //详细地址
					address_name: '', // 地址名称
					location: '' //经纬度
				},
				arrayList: [],
				list: [{
					text: '商品店铺'
				}, {
					text: '摄影店铺'
				}],
				listIndex: 0,
				uid: 0,
				shopid: 0,
				shopName:'',
			}
		},
		onLoad(options) {
			if(!uni.getStorageSync('userInfo')){
				this.loagin();
			}
			if (options.istuijian==1) {
				let obj = JSON.parse(options.obj);
				this.istuijian = options.istuijian;
				this.shopid = obj.shopId;
				this.uid = obj.uid;
				this.shopName = obj.name;
			}
			this.getNavsList();
		},
		methods: {
			// 点击我知道了
			iKnow() {
				this.issubmit = false;
				uni.navigateBack({
					delta: 2
				})
				this.$refs.popupSucce.close();
			},
			onActive(index) {
				this.listIndex = index;
			},
			submitData() {
				if(!this.issubmit){
					this.issubmit = true;
				}else{
					return;
				}
				let that = this,
					arr = []
				that.arrayList.forEach(item => {
					arr.push(item.id)
				})
				if(!that.addressData.province){
					uni.showToast({
						title:'请选择所在地',
						icon:'none'
					})
					this.issubmit = false;
					return;
				}
				if(!that.dianpu_val){
					uni.showToast({
						title:'请输入店铺名称',
						icon:'none'
					})
					this.issubmit = false;
					return;
				}
				if(that.listIndex==0){
					if(arr.length==0){
						uni.showToast({
							title:'选择行业分类',
							icon:'none'
						})
						this.issubmit = false;
						return;
					}
				}
				if(!that.chanp_val){
					uni.showToast({
						title:'请输入所售商品',
						icon:'none'
					})
					this.issubmit = false;
					return;
				}
				if(!that.dizhi_val){
					uni.showToast({
						title:'请输入详细地址',
						icon:'none'
					})
					this.issubmit = false;
					return;
				}
				if(!that.lanxiren_val){
					uni.showToast({
						title:'请输入联系人',
						icon:'none'
					})
					this.issubmit = false;
					return;
				}
				if(!that.phoneNum){
					uni.showToast({
						title:'请输入联系电话',
						icon:'none'
					})
					this.issubmit = false;
					return;
				}
				let data = {
					city: `${that.addressData.province}/${that.addressData.city}/${that.addressData.district}`,
					shopname: that.dianpu_val,
					select: arr.join(','),
					goods_detail: that.chanp_val,
					address: that.dizhi_val,
					username: that.lanxiren_val,
					mobile: that.phoneNum,
					is_photography: that.listIndex
				}
				if(this.istuijian==1){
					data.uid = this.uid;
					data.shopid = this.shopid;
				}
				this.$request({
					url: 'shop/apply',
					method: 'POST',
					data
				}).then(res => {
					if (res.data.code == 1) {
						that.$refs.popupSucce.open();
					} else {
						this.issubmit = false;
						this.$wanlshop.msg('申请失败/是否信息输入正确')
					}
				})
			},
			// 获取地址信息
			successSelectAddress(address) {
				this.addressData.country = address.country;
				this.addressData.province = address.province;
				this.addressData.city = address.city;
				this.addressData.citycode = address.citycode;
				this.addressData.district = address.district;
				this.addressData.formatted_address = address.formatted_address;
				this.addressData.location = address.location;
				this.addressData.adcode = address.adcode;
			},
			active(index) {
				let that = this
				that.navsList[index].flag = !that.navsList[index].flag
			},
			close() {
				let that = this
				that.arrayList = []
				that.navsList.forEach(item => {
					if (item.flag) {
						that.arrayList.push({
							'name': item.name,
							'id': item.id
						})
					}
				})
				that.$refs.popup.close()

			},
			getNavsList() {
				let that = this
				that.$request({
					url: 'common/categoryList'
				}).then(res => {
					if (res.statusCode == 200) {
						res.data.data.forEach(item => {
							item.flag = false
						})
						that.navsList = res.data.data
					}
				})
			},
			open() {
				this.$refs.popup.open()
			},
			// 显示选择地址弹窗
			btnClick() {
				this.$refs.wanlAddress.show()
			},
			bindPickerChange: function(e) {
				this.index = e.detail.value
			},
			onchange(e) {
				const value = e.detail.value
			},
			onnodeclick(node) {
				return false
			}
		}
	}
</script>

<style scoped lang="scss">
	.k_box {
		width: 468upx;

		background: #FFFFFF;
		border-radius: 32upx;

		.titl {
			color: #000;
			font-size: 30upx;
			font-weight: 550;
			text-align: center;
			padding-top: 72upx;
		}

		.btn_box {
			width: 100%;
			margin-top: 30upx;
			height: 92upx;
			display: flex;
			justify-content: space-between;
			border-top: 2upx solid #F4F4F4;
			.btn_r {
				width: 100%;
				color: #333;
				border-left: 2upx solid #F4F4F4;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}

	.merchant {
		overflow: hidden;

		.bottom_box {
			height: 750upx;

			.bottom_btn {
				width: 622upx;
				height: 90upx;
				background: #EBBE87;
				border-radius: 50upx;
				margin: 20upx auto;
				line-height: 90upx;
				color: #FFFFFF;
			}

			.bottom_list_box {
				height: 522upx;

				.scroll-Y {
					height: 522upx;

					.content_box_active {
						height: 88upx;
						box-sizing: border-box;
						padding: 20upx 32upx 0 32upx;
						background: linear-gradient(89.95deg, #EDEDED 0.05%, rgba(237, 237, 237, 0) 99.95%);
						margin: 8upx 0 8upx 0;

						.scroll-view-item_c {
							margin-top: 6upx;
						}
					}

					.content_box {
						height: 88upx;
						box-sizing: border-box;
						padding: 20upx 32upx 0 32upx;
						background: #FFFFFF;
						margin: 8upx 0 8upx 0;

						.scroll-view-item_c {
							margin-top: 6upx;
						}
					}
				}
			}

			.top_box_bot {
				height: 100upx;
				background: linear-gradient(180deg, #FFF7EA 0.01%, rgba(255, 255, 255, 0) 100%);

				.scroll-view_H {
					width: 750upx;
					height: 130upx;
					white-space: nowrap;
					box-sizing: border-box;
					padding: 32upx 0 0 26upx;

					.scroll-view-item_H {
						display: inline-block;
						margin-right: 10upx;
						color: #844902;
					}
				}
			}
		}

		.header_box {
			position: absolute;
			height: 540upx;
			top: -106upx;
		}

		.pos {
			position: relative;

			.title {
				font-size: 56upx;
				font-family: HYYakuHei-85W, HYYakuHei;
				font-weight: normal;
				color: #FFFFFF;
				margin-top: 74upx;
			}

			.tab_box {
				width: 654upx;
				background: #FFFFFF;
				box-shadow: 0upx 0upx 16upx 2upx rgba(0, 0, 0, 0.1);
				border-radius: 24upx 24upx 24upx 24upx;
				margin: 74upx auto;
				margin-bottom: 0;
				padding: 42upx 0 38rpx 32upx;

				.list_box {
					width: 622upx;
					border-bottom: 2upx solid #F4F4F4;
					margin-bottom: 38upx;

					.list_txt {
						width: 112upx;
						height: 56upx;
						color: #333333;
					}

					.active_box {
						width: 96upx;
						height: 44upx;
						border: 1upx solid #999999;
						border-radius: 8upx;
						text-align: center;
						line-height: 44upx;
						margin-left: 34upx;
						margin-top: -4upx;
						color: #999999;
					}

					.active_box_active {
						width: 96upx;
						height: 44upx;
						border: 1upx solid #000000;
						border-radius: 8upx;
						text-align: center;
						line-height: 44upx;
						margin-left: 34upx;
						margin-top: -4upx;
						color: #000000;
					}

					/deep/ .uni-data-tree {
						margin-top: -19rpx;
						margin-left: 38upx;
					}

					/deep/ .input-value-border {
						border: none !important;
					}

					/deep/ .input-value {
						padding: 0;
					}

					/deep/ .selected-list {
						padding: 0;
					}

					.uni-input {
						width: 400upx;
						margin-left: 30upx;
						color: #333333;
					}

					.uni_input_active {
						color: #333333;
					}

					.uni_input {
						margin-top: -4rpx;
						margin-left: 38upx;
						color: #333333;
					}
				}

				.bottom_btn {
					width: 622upx;
					height: 100upx;
					background: #EBBE87;
					border-radius: 50upx 50upx 50upx 50upx;
					color: #FFFFFF;
					line-height: 100upx;
					margin-top: 16upx;
				}
			}

			.tishi {
				color: #999999;
				margin-left: 32upx;
				margin-top: 22upx;
			}
		}
	}
</style>